<%--
  Created by IntelliJ IDEA.
  User: 张洪瑞
  Date: 2021-6-28  0028
  Time: 下午 15:23:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <!-- 引入 layui.js -->
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="margin-bottom: -5px;">
            <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label" style="width: 86px;">角色</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input style="padding: 0px;width: 200px;margin-right: 0px;" type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label" style="width: 86px;padding-left: 0px;margin-left: 0px;">角色备注</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input style="padding: 0px;width: 200px;" type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="margin-left: 30px;">
                <button class="layui-btn layui-btn-sm layui-btn-normal" style="width: 60px;height: 32px;padding: 0px;" lay-submit="" lay-filter="demo1"><i class="layui-icon layui-icon-search" style="font-size: 18px; color: #FFFFFF;font-weight: bold;"></i>搜索</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table,
            form = layui.form;

        //监听提交
        form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        table.render({
            elem: '#test'
            ,url:'db/dataRole.json'	//数据接口
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox'}
                ,{field:'jid', title:'ID', width:'20%', unresize: true, sort: true}
                ,{field:'jname', title:'角色', width:'20%', edit: 'text'}
                ,{field:'jremark', title:'角色备注', width:'36%', edit: 'text'}
                ,{title:'操作', toolbar: '#barDemo', width:'20%'}
            ]]
            ,page: true
        });



        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</html>
